<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
import { defaultPagingParams } from '../index'
import { ENERGY, PAGING } from '@/constant'
// ------------------use------------------
// #region
const emits = defineEmits<{
  search: []
  reset: []
}>()
const query = defineModel({
  default: () => defaultPagingParams,
})
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region
const computedTime = computed({
  set([s, e]: any) {
    query.value.startTime = s!
    query.value.endTime = e!
  },
  get() {
    return [query.value.startTime!, query.value.endTime!]
  },
})
// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
/** 重置 */
async function reset() {
  query.value = { ...defaultPagingParams }
  await nextTick()
  emits('reset')
}
async function search() {
  Object.assign(query.value, PAGING.PARAMS)
  await nextTick()
  emits('search')
}
// #endregion
</script>

<template>
  <el-form
    inline
    label-width="80px"
    label-position="left"
    class="flex-incompressible width-fill"
  >
    <el-form-item label="能源类型">
      <el-select v-model="query.type" class="width-fill">
        <el-option
          v-for="item in ENERGY.typeList"
          :key="item.type"
          :label="item.label"
          :value="item.type"
        />
      </el-select>
    </el-form-item>
    <el-form-item label-width="50px" label="区间">
      <el-date-picker
        v-model="computedTime"
        type="monthrange"
        unlink-panels
        value-format="YYYY-MM"
        :shortcuts="PAGING.RANGE_SHORTCUTS_MONTH"
      />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="search" />
      <el-button plain :icon="Delete" @click="reset">
        清空
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
